<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
  defaultValue: {
    type: Number,
    default: 20
  }
})
const emit = defineEmits(['update:value'])
const progressSlider = ref(null)
const progressTrack = ref(null)
const progressHandle = ref(null)
const percentage = ref(0)
const dragProgress = (e) => {
  e.preventDefault()
  handleProgressChange(e)
  document.addEventListener('mousemove', handleProgressChange)
  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', handleProgressChange)
  })
}
const handleProgressChange = (e) => {
  const rect = progressSlider.value.getBoundingClientRect()
  percentage.value = Math.max(
    0,
    Math.min(100, ((e.clientX - rect.left) / rect.width) * 100)
  )
  progressTrack.value.style.width = `${percentage.value}%`
  progressHandle.value.style.left = `${percentage.value}%`
}
onMounted(() => {
  percentage.value = props.defaultValue
  progressTrack.value.style.width = `${percentage.value}%`
  progressHandle.value.style.left = `${percentage.value}%`
})
</script>

<template>
  <div class="progress-container">
    <div class="progress-slider" ref="progressSlider" @mousedown="dragProgress">
      <div class="progress-track" ref="progressTrack"></div>
      <div class="progress-handle" ref="progressHandle"></div>
    </div>
    <span class="progress-value">{{ Math.round(percentage) }}%</span>
  </div>
</template>

<style lang="scss" scoped>
.progress-container {
  width: 200px;
  height: 16px;

  .progress-slider {
    width: 100%;
    height: 100%;
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    cursor: pointer;
    .progress-track {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 100%;
      width: 0%;
      background: #ff668f;
      border-radius: 8px;
    }
    .progress-handle {
      position: absolute;
      top: -50%;
      left: 8px;
      width: 16px;
      height: 16px;
      background: #ffffff;
      border-radius: 50%;
      transform: translate(-50%, 50%);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
  }
}
</style>
